<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <font style="font-weight: bold; font-size: 23px;">股民列表页</font><br>
    姓名：<input type="text" id="name" placeholder="按姓名模糊搜索">
    <button class="layui-btn" onclick="queryByNameLike()">搜索</button>
    <button class="layui-btn" onclick="add()">添加</button>
    <table id="myTable" lay-filter="myFilter"></table>
    <script type="text/html" id="myToolbar">
        <button class="lauyi-btn" lay-event="update">更新</button>
    </script>
</center>
</body>
<link rel="stylesheet" href="../views/js/layui/css/layui.css">
<script type="text/javascript" src="../views/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../views/js/layui/layui.all.js"></script>
<script type="text/javascript">
    var table = layui.table;
    $(function () {
        table.render({
            elem: '#myTable',//绑定表格的id
            url: "../investor/allByPage",
            width: 1100,
            method: 'post',
            toolbar: '#toolbarDemo', //开启头部工具栏
            cols: [[{
                title: '序号',
                field: 'id',
                align: 'center',//字体居中
            }, {
                field: 'name',
                title: '姓名',
                align: 'center',//字体居中
            }, {
                field: 'sex',
                title: '性别',
                align: 'center',//字体居中
            }, {
                field: 'securitie',
                title: '证券公司',
                align: 'center',//字体居中
                /* templet : '#sexTpl',//绑定代码模板 暂时用不到 男女 * */
            }, {
                field: 'account',
                title: '股东账号',
                align: 'center',//字体居中
                sort: true
                /* templet : '#sexTpl',//绑定代码模板 暂时用不到 男女 * */
            }, {
                field: 'values',
                title: '股票市值',
                align: 'center',//字体居中
                sort: true
            }, {
                field: 'sname',
                title: '持仓股票',
                align: 'center',//字体居中
            }, {
                title: '操作',
                align: 'center',//字体居中
                toolbar: '#myToolbar'
            }]
            ],
            limits: [6, 10],//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
            limit: 5,//每页显示的条数（默认：10）。值务必对应 limits 参数的选项。
            page: true,//是否开启分页
            request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'limit' //每页数据量的参数名，默认：limit
            }
        })
    })

    function queryByNameLike() {
        //获取文本框的信息
        var keyWord = $("#name").val();
        table.render({
            elem: '#myTable',//绑定表格的id
            url: "../investor/allByPage",
            width: 1100,
            method: 'post',
            toolbar: '#toolbarDemo', //开启头部工具栏
            cols: [[{
                title: '序号',
                field: 'id',
                align: 'center',//字体居中
            }, {
                field: 'name',
                title: '姓名',
                align: 'center',//字体居中
            }, {
                field: 'sex',
                title: '性别',
                align: 'center',//字体居中
            }, {
                field: 'securitie',
                title: '证券公司',
                align: 'center',//字体居中
                /* templet : '#sexTpl',//绑定代码模板 暂时用不到 男女 * */
            }, {
                field: 'account',
                title: '股东账号',
                align: 'center',//字体居中
                sort: true
                /* templet : '#sexTpl',//绑定代码模板 暂时用不到 男女 * */
            }, {
                field: 'values',
                title: '股票市值',
                align: 'center',//字体居中
                sort: true
            }, {
                field: 'sname',
                title: '持仓股票',
                align: 'center',//字体居中
            }, {
                title: '操作',
                align: 'center',//字体居中
                toolbar: '#myToolbar'
            }]
            ],
            limits: [6, 10],//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
            limit: 5,//每页显示的条数（默认：10）。值务必对应 limits 参数的选项。
            page: true,//是否开启分页
            request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'limit' //每页数据量的参数名，默认：limit
            },
            where: {
                name: keyWord
            }
        })
    }

    table.on('tool(myFilter)', function (obj) {
        console.log(obj);
        $.post("../investor/setUpdateId?id="+obj.data.id,function(res){
            location.href = "../views/update.html";
        },'json')
    })

    table.on('sort(myFilter)', function (obj) {
        console.log(obj);
        //重新渲染表格
        table.reload('myTable', {
            url: '../investor/allByPage',
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'limit' //每页数据量的参数名，默认：limit
            },
            page: {
                curr: 1 //重新从第 1 页开始
            },
            where: {
                field: obj.field, //当前排序的字段名
                type: obj.type//当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            }
        }, 'data');
    })

    function add(){
        location.href = "../views/add.html";
    }
</script>
</html>